<template>
	<view>
		<view class="treeOne" v-for="(item, i) in data" :key="i">
			<view class="one" :class="chooseMode === 'line' && item.choose?'active':''" @click.stop="select(item)">
				<image
					class="jt"
					@click.stop="open(item)"
					v-show="item[props.children] !== undefined?(item[props.children].length > 0?true:false):false"
					:src="require('./images/ico_jt_'+(!item.openTag?'r':'b')+'.png')"></image>
				<image v-if="chooseMode === 'ico' && item.choose" class="chooseTag" :src="require('./images/ico_choose.png')"></image>
				<text class="label">{{item[props.label]}}</text>
			</view>
			<view class="children" v-if="item.openTag && item[props.children] !== undefined">
				<treeSelectOne
					:props="props"
					@getChooseValue="getValue"
					@openTagChange="openTagChange"
					:data="item[props.children]"
					:allData="allData"
					:checkStrictly="checkStrictly"
					:multiple="multiple"
					:chooseMode="chooseMode"
					:showAllLevels="showAllLevels"></treeSelectOne>
			</view>
		</view>
	</view>
</template>

<script>
  import treeSelectOne from "./treeSelectOne.vue"
  export default {
  	name: "treeSelectOne",
  	data() {
  		return {
  		}
  	},
  	props: {
  		data: Array,
  		allData: Array, // 完整的树数据
		// 是否严格的遵守父子节点不互相关联
  		checkStrictly: {
			type: Boolean,
			default: false
		},
		// 是否多选
  		multiple: {
			type: Boolean,
			default: false
		},
		// 是否返回完整路径数据集
  		showAllLevels: {
			type: Boolean,
			default: true
		},
		// 选择模式，默认line，勾选模式ico
  		chooseMode: {
			type: String,
			default: 'line'
		},
		// 配置选项，具体见下表
  		props: {
			type: Object,
			default: function () {
				return {
					label: 'label', // 指定选项的值为选项对象的某个属性值
					id: 'id', // 指定选项的值为选项对象的某个属性值
					children: 'children', // 指定选项的子选项为选项对象的某个属性值
				};
			}
		},
  	},
  	updated(){
  		// console.log(this.data)
  	},
  	components: {
  		'treeSelectOne':treeSelectOne
  	},
  	methods: {
  		// 获取
  		getValue(ids, oldChoose){
			// 错误数据
  			// ids.push(this.chooseValue.id);
  			this.$emit("getChooseValue",  ids, oldChoose); // 继续向上传递
  		},
		openTagChange(ids, openTag) {
			this.$emit("openTagChange", ids, openTag);
		},
  		// 打开下级菜单
  		open(item){
			const ids = this.findFid(this.allData, item[this.props.id], []);
			// 推完整路径，解决小程序，展开后选中父节点自动收起问题。
			this.$emit("openTagChange", ids, !item.openTag);
  		},
  		// 点击选中一级
  		select(item){
			let tag = false;
			// 是否严格的遵守父子节点不互相关联
			if (this.checkStrictly) {
				tag = true;
			} else {
				if (!item[this.props.children] || item[this.props.children].length === 0) {
					tag = true;
				}
			}
			if (tag) {
				const ids = this.findFid(this.allData, item[this.props.id], []);
				// 是否返回完整路径数据集
				if (this.showAllLevels) {
					// 推完整路径
					this.$emit("getChooseValue",  ids, item.choose);
				} else {
					// 只推当前层
					this.$emit("getChooseValue",  [item[this.props.id]], item.choose);
				}
			}
  		},
		// 通过选中的对象id获取其整个id的数据集，包括其所有的父级对象的id
		findFid(data, id, ids){
			const nums = data.length;
			for (let i = 0; i < nums; i++) {
				if (data[i][this.props.id] === id) {
					ids.unshift(data[i][this.props.id]);
					return ids;
				}
				if(data[i][this.props.children] !== undefined){
					ids = this.findFid(data[i][this.props.children], id, ids);
					if (ids.length > 0 && ids[ids.length - 1] === id) {
						ids.unshift(data[i][this.props.id]);
						return ids;
					}
				}
			}
			return ids;
		},
  	}
  }
</script>

<style lang="scss" scoped>
	@import "./treeSelectOne.scss"
</style>
